<template>
	<view class="cate">
		<my-search-btn @click.native="goSearch"></my-search-btn>
		<view class="scroll-view-container" :style="{height:cateHeight+'px'}">
			<scroll-view class="first-cate" enhanced :show-scrollbar="false" scroll-y :bounces="true" >
				<view class="first-cate-item"  v-for="(item,index) in cateList" :key="index" :class="{active:activeIndex==index}" @click="firstCateClickHandler(index)">
					<view class="first-cate-tag" :class="{'active-tag':activeIndex == index}"></view>
					<text v-text="item.cat_name"></text>
					<view class="first-cate-tag tag-right"></view>
				</view>
			</scroll-view>
			<scroll-view class="second-cate" scroll-y enhanced :show-scrollbar="false" bounces :scroll-top="scrollTop">
			  <template v-for="(item,index) in cateLevel2List">
			  	<view class="second-cate-title">
					<text v-text="`/ ${item.cat_name} /`"></text>
				</view>
				<view class="third-cate-box">
						<view class="third-cate-item" v-for="(item2,index) in item.children" :key="index" @click="thirdCateClickHander(item2.cat_id)">
							<image class="third-item-image" :src="item2.cat_icon" mode="widthFix"></image>
							<text class="third-item-name" v-text="item2.cat_name"></text>
						</view>
				</view>
			  </template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			   cateList:[],
			   activeIndex:0,
			   cateLevel2List:[],
			   scrollTop:0,
			   cateHeight:0
			};
		},
		onLoad() {
			this.getCateList();
			uni.getSystemInfo({
				success:({windowHeight,windowWidth}) => {
					this.cateHeight = windowHeight - (windowWidth/750*120);
				}
			});
		},
		methods:{
			async getCateList(){
				let {data:{message,meta}} = await uni.$http.get("/api/public/v1/categories");
				if(meta.status == 200){
					this.cateList = message;
					this.cateLevel2List = message[0].children;
				}else{
					uni.$showReqFailToast()
				}
			},
			firstCateClickHandler(index){
				this.activeIndex = index;
				this.cateLevel2List = this.cateList[index].children;
				this.scrollTop = this.scrollTop == 0 ? 1 : 0;
			},
			thirdCateClickHander(id){
				uni.navigateTo({
					url:`/subpkg/goods_list/goods_list?cid=${id}`
				})
			},
			goSearch(){
				uni.navigateTo({
					url:"/subpkg/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		.cate {
			width: 100%;
			height: 100%;
			.sticky{
				position: sticky;
				top: 0;
				z-index: 999;
			}
			.scroll-view-container {
				display: flex;
				justify-content: space-between;
				.first-cate {
					width: 25%;
					height: 100%;
					.active{
						background-color: #fefefe;
					}
					.first-cate-item {
						height: 12.5%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 35rpx;
						.first-cate-tag{
							width: 10rpx;
							height: 60rpx;
							background-color: #D81E07;
							border-radius: 6rpx;
							background-color: transparent;
						}
						.active-tag{
							background-color: #D81E07;
						}
					}
				}
				.second-cate{
					width: 75%;
					height: 100%;
					background-color: #fefefe;
					font-size: 35rpx;
					
						.second-cate-title{
							font-weight: bold;
							width: 100%;
							height: 12.5%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.third-cate-box{
							display: grid;
							grid-template-columns:1fr 1fr 1fr;
							grid-row-gap: 30rpx;
							.third-cate-item{
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: space-between;
								.third-item-image{
									width: 145rpx;
								}
							}
						}
				}
			}
		}
	}
</style>